<template>
	<div class="gototop fadeIn animated" v-if="isShow">
		<a @click="gotop($event)" class="icon--1"></a>
	</div>
</template>

<script>
	export default {
		name:"Gototop",
		data: function(){
			return {
				isShow:false
			}
		},
		mounted: function(){
			window.scrollTo(1,1);
			let that = this;
			that.throttleload = throttle(() => {
				that._scrollHandler()
			}, 100);
			window.addEventListener('scroll', that.throttleload);
		},
		destroyed: function(){
			let that = this;
			window.removeEventListener('scroll', that.throttleload);
		},
		methods:{
			gotop:function(e){
				window.scrollTo(1,1)
			},
			_scrollHandler:function(){
				let top = getScrollTop();
				if (top > 100){
					this.$set(this, "isShow", true);
				}else{
					this.$set(this, "isShow", false);
				}
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.gototop{
		position: fixed;
		bottom:100/@base;
		right:20/@base;
		z-index: 99998;
		a{
			border-radius: 60/@base;
			width:60/@base;
			height: 60/@base;
			overflow: hidden;
			display: block;
			text-align:center;
			background-color: rgba(0,0,0,.5);
			color:#fff;
			line-height: 60/@base;
			font-weight: 700;
		}
	}
</style>
